import 'overlayscrollbars/overlayscrollbars.css'
import { OverlayScrollbars } from 'overlayscrollbars'

function bindDrag(el, binding) {
  el._osInstance = OverlayScrollbars(
    {
      target: el.querySelector(binding.value.target) || el,
      elements: {
        viewport: el.querySelector(binding.value.viewport)
      }
    },
    {
      scrollbars: {
        autoHide: 'leave',
        autoHideDelay: 100,
        theme: binding.theme || 'os-theme-dark'
      }
    }
  )
}

export default {
  bind: (el, binding) => bindDrag(el, binding),
  unbind(el, binding) {
    el._osInstance?.destroy()
  }
}
